<template>
  <Container 
    title="个人中心" 
    navColor="#2E5266"
    titleColor="#FFFFFF"
    pageColor="#f8f8f8"
  >
    <view class="container">
      <view class="header">
        <view class="avatar">
          <image :src="userInfo.avatar" class="avatar-img" />
        </view>
        <text class="username">{{ userInfo.name }}</text>
        <text class="user-desc">{{ userInfo.description }}</text>
      </view>
      
      <view class="menu-section">
        <view class="menu-item" @click="navigateToPage('/pages/ai/dialog')">
          <text class="menu-text">AI字帖</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @click="navigateToPage('/pages/settings/settings')">
          <text class="menu-text">设置</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @click="navigateToPage('/pages/help/index')">
          <text class="menu-text">帮助与反馈</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @click="navigateToPage('/pages/about/index')">
          <text class="menu-text">关于我们</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
      
      <view class="stats-section">
        <text class="section-title">使用统计</text>
        <view class="stats-grid">
          <view class="stat-item">
            <text class="stat-number">{{ userStats.practiceCount }}</text>
            <text class="stat-label">练习次数</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">{{ userStats.practiceTime }}</text>
            <text class="stat-label">练习时长(分钟)</text>
          </view>
        </view>
      </view>
    </view>
  </Container>
</template>

<script>
import Container from '@/components/Container/index.vue'

export default {
  components: {
    Container
  },
  data() {
    return {
      userInfo: {
        name: '用户昵称',
        description: '练字爱好者',
        avatar: '/static/default-avatar.png'
      },
      userStats: {
        practiceCount: 15,
        practiceTime: 120
      }
    }
  },
  onLoad() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      // 模拟获取用户信息
      console.log('加载用户信息')
    },
    
    navigateToPage(url) {
      uni.navigateTo({
        url: url,
        fail: () => {
          uni.showToast({
            title: '页面暂未开放',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 88px);
  background-color: transparent;
}

.header {
  background-color: white;
  padding: 40rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.avatar {
  margin-bottom: 20rpx;
}

.avatar-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #ddd;
}

.username {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.user-desc {
  font-size: 28rpx;
  color: #666;
}

.menu-section {
  background-color: white;
  margin-bottom: 20rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
}

.menu-arrow {
  font-size: 32rpx;
  color: #ccc;
}

.stats-section {
  background-color: white;
  padding: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #2E5266;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 28rpx;
  color: #666;
}
</style>